<template>
  <card ref="Card">
    <div slot="header" v-if="$isDev">
      <el-button class="float-right" type="success" @click="cancel">重置</el-button>
    </div>
    <el-form :model="form" :rules="rules" ref="Form" label-width="140px">
      <row-col>
        <el-form-item label="单号:" prop="number">
          <el-input v-model.trim="form.number" @blur="getOnline"/>
        </el-form-item>
      </row-col>
      <div v-if="son.hasSon === true">
        <el-row>
          <el-col :span="12">
            <el-form-item label="体积计算:">
              <span>长(cm) * 宽(cm) * 高(cm) / {{$volume}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="包装类型数量:">
              <el-input-number @change="changeNumber" v-model="son.packTotal" controls-position="right" :precision="0" :min="1" :max="100"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="总件数:">
              <el-input-number :disabled="true" v-model="son.total" controls-position="right" :precision="0" :min="1"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-for="item in son.childrenList" :key="item.key">
          <el-col :span="12">
            <el-input-number v-model="item.length" controls-position="right" @change="calculate" :min="0"/>
            *
            <el-input-number v-model="item.width" controls-position="right" @change="calculate" :min="0"/>
            *
            <el-input-number v-model="item.height" controls-position="right" @change="calculate" :min="0"/>
          </el-col>
          <el-col :span="6">
            <el-form-item label="包装方式">
              <el-select v-model="item.packWay" placeholder="包装方式">
                <el-option v-for="item in packOptions" :key="item.key" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="件数:">
              <el-input-number v-model="item.count" @change="changeTotal" controls-position="right" :precision="0" :min="1"/>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="寄件人姓名:" prop="senderName">
            <input-search-start v-model="form.senderName" :that="this"/>
          </el-form-item>
          <el-form-item label="寄件人详细地址:" prop="senderAddress">
            <el-input v-model="form.senderAddress" placeholder="中文" @blur="translateZhToEn(form.senderAddress,'enSenderAddress')"/>
          </el-form-item>
          <el-form-item label="寄件人联系电话:" prop="senderPhone">
            <el-input v-model="form.senderPhone"></el-input>
          </el-form-item>
          <el-form-item label="寄件人证件号:" prop="senderId">
            <el-input v-model="form.senderId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="laosSenderName">
            <el-input v-model="form.laosSenderName" placeholder="老挝语"></el-input>
          </el-form-item>
          <el-form-item prop="laosSenderAddress">
            <el-input v-model="form.laosSenderAddress" placeholder="老挝语"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="收件人姓名:" prop="receiverName">
            <input-search-end v-model="form.receiverName" :that="this"/>
          </el-form-item>
          <el-form-item label="收件人详细地址:" prop="receiverAddress">
            <search-select-all ref="SearchSelectAll" v-model="addressId" @get="getSiteAddress"/>
          </el-form-item>
          <el-form-item label="收件人联系电话:" prop="receiverPhone">
            <el-input v-model="form.receiverPhone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="laosReceiverName">
            <el-input v-model="form.laosReceiverName" placeholder="老挝语"></el-input>
          </el-form-item>
          <el-form-item prop="laosReceiverAddress">
            <el-input v-model="form.laosReceiverAddress" placeholder="老挝语" readonly></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="快递种类:">
        <el-radio-group v-model="form.expressSort">
          <el-radio :label="0">物品</el-radio>
          <el-radio :label="1">文件</el-radio>
        </el-radio-group>
      </el-form-item>
      <row-col>
        <el-form-item label="物品名称:">
          <el-input v-model="form.articleName" placeholder="中文"/>
        </el-form-item>
        <el-form-item label="物品名称:" slot="r">
          <el-input v-model="form.laosArticleName" placeholder="老挝语"/>
        </el-form-item>
      </row-col>
      <el-form-item label="保价:">
        <el-radio-group v-model="form.isProtect" @change="changeProtect">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-row v-if="form.isProtect===1">
        <el-col :span="8">
          <el-form-item>
            <el-radio-group v-model="form.protectWay" @change="changeProtect">
              <el-radio :label="0">普通</el-radio>
              <el-radio :label="1">易碎品</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保额:" prop="coverage">
            <el-input-number @change="changeProtect" v-model="form.coverage" controls-position="right" :precision="2" :min="0"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保价费:" prop="protectFee">
            <el-input-number v-model="form.protectFee" controls-position="right" :precision="2" :min="0"/>
          </el-form-item>
        </el-col>
      </el-row>
      <row-col>
        <el-form-item label="报关费:">
          <el-radio-group v-model="form.isCustomsFee" @change="changeIsCustoms">
            <el-radio :label="1">需要</el-radio>
            <el-radio :label="0">不需要</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.isCustomsFee===1" label="报关费金额:" prop="customsFee" slot="r">
          <el-input-number v-model="form.customsFee" controls-position="right" :precision="2" :min="0"/>
        </el-form-item>
      </row-col>
      <el-form-item label="计算重量:">
        <el-input-number v-model="computeWeight.length" controls-position="right" @change="calculate" :min="0"/>
        长(cm) *
        <el-input-number v-model="computeWeight.width" controls-position="right" @change="calculate" :min="0"/>
        宽(cm) *
        <el-input-number v-model="computeWeight.height" controls-position="right" @change="calculate" :min="0"/>
        高(cm) / {{$volume}}
      </el-form-item>
      <row-col>
        <el-form-item label="重量:" prop="weight">
          <el-input-number v-model="form.weight" controls-position="right" :precision="1" :min="0" @change="changeWeight"/>
        </el-form-item>
        <el-form-item label="运费:" prop="freight">
          <el-input-number v-model="form.freight" controls-position="right" :precision="2" :min="0"/>
        </el-form-item>
        <el-form-item label="结算方式：" prop="websiteClearingWay">
          <el-radio-group v-model="form.websiteClearingWay" @change="changeClearingWay">
            <el-radio :label="0">寄付</el-radio>
            <el-radio :label="1">到付</el-radio>
          </el-radio-group>
        </el-form-item>
      </row-col>
      <el-row>
        <el-col :span="6">
          <el-form-item label="代收贷款:">
            <el-input-number v-model="form.loans" controls-position="right" :precision="2" :min="0"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="特殊区域费:">
            <el-input-number v-model="form.specialPlaceFee" controls-position="right" :precision="2" :min="0"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="包装费:">
            <el-input-number v-model="form.packFee" controls-position="right" :precision="2" :min="0"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="总计:">
            <el-input-number v-model="form.totalFee" controls-position="right" :precision="2" :min="0"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!--      <el-divider></el-divider>-->
      <!--      <el-row>-->
      <!--        <el-col :span="12">-->
      <!--          <el-form-item>-->
      <!--            <el-cascader-->
      <!--                v-model="selectItem" ref="ItemCascader" style="width: 90%" @change="changeItemName"-->
      <!--                :options="itemData" :props="{label:'name',value: 'name'}"-->
      <!--                placeholder="请选择" clearable filterable :show-all-levels="true"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="6">-->
      <!--          <el-select-->
      <!--              v-model="brand" placeholder="品牌" @change="getSpecifications" filterable-->
      <!--              allow-create default-first-option clearable>-->
      <!--            <el-option label="无品牌" value="无品牌"></el-option>-->
      <!--            <el-option v-for="item in brandOption" :label="item.brand" :value="item.brand" :key="item.id"/>-->
      <!--          </el-select>-->
      <!--        </el-col>-->
      <!--        <el-col :span="6">-->
      <!--          <el-popover placement="right" width="200" trigger="click">-->
      <!--            <div style="overflow: auto;height: 500px">-->
      <!--              <div v-for="item in size" :key="item.key" style="display: flex;justify-content: space-between;margin-bottom: 2px">-->
      <!--                <div>{{item.value}}</div>-->
      <!--                <div>-->
      <!--                  <el-button type="primary" @click="addSize(item.value)" size="mini">+</el-button>-->
      <!--                  <el-button type="danger" @click="delSize(item.value)" size="mini">-</el-button>-->
      <!--                </div>-->
      <!--              </div>-->
      <!--            </div>-->
      <!--            <el-button slot="reference">选择尺寸</el-button>-->
      <!--          </el-popover>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <el-row>-->
      <!--        <el-col :span="8">-->
      <!--          <el-form-item label="品名:">-->
      <!--            <search-select-item ref="SearchSelectItem" v-model="form.articleName" :that="this"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="8">-->
      <!--          <el-form-item label="品名:">-->
      <!--            <el-input v-model="form.laosArticleName" placeholder="老挝语" @blur="translateZhAndEn"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="8">-->
      <!--          <el-form-item label="英文商品名称:">-->
      <!--            <el-input v-model="form.enArticleName" placeholder="英文"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <row-col>-->
      <!--        <el-form-item label="税号">-->
      <!--          <el-input v-model="form.dutyParagraph"/>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="规格型号:" slot="r">-->
      <!--          <el-input v-model="form.specification" @blur="changeSpecifications"/>-->
      <!--        </el-form-item>-->
      <!--      </row-col>-->
      <!--      <el-row>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="毛重KG:">-->
      <!--            <el-input-number v-model="form.roughWeight" controls-position="right" :precision="3" :min="0"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="净重KG:">-->
      <!--            <el-input-number v-model="form.netWeight" controls-position="right" :precision="3" :min="0" @change="getSpecifications"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="内件毛重KG:">-->
      <!--            <el-input-number v-model="form.insideRoughWeight" controls-position="right" :precision="3" :min="0"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <el-row>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="内件数量:">-->
      <!--            <el-input-number v-model="form.insideCount" controls-position="right" :min="0.01" :precision="2" @change="getSpecifications"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="申报单价:">-->
      <!--            <el-input-number v-model="form.declarationUnitFee" controls-position="right" :min="0" :precision="2"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="申报总价:">-->
      <!--            <el-input-number v-model="form.declarationTotalFee" controls-position="right" :min="0" :precision="2"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="计量单位">-->
      <!--            <el-input v-model="form.measureUnit"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <el-row>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="税率:">-->
      <!--            <el-input-number v-model="form.taxRate" controls-position="right" :min="0" :max="1" :precision="2"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="应收税额:">-->
      <!--            <el-input-number v-model="form.receivableTax" controls-position="right" :min="0" :precision="2"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="实收税额:">-->
      <!--            <el-input-number v-model="form.realTax" controls-position="right" :min="0" :precision="2"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="6">-->
      <!--          <el-form-item label="补收税额:">-->
      <!--            <el-input-number v-model="form.repairTax" controls-position="right" :min="0" :precision="2"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <row-col>-->
      <!--        <el-form-item label="发件人城市:">-->
      <!--          <el-input v-model="form.senderCity" @blur="translateZhToEn(form.senderCity,'enSenderCity')"/>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="英文发件人城市" slot="r">-->
      <!--          <el-input v-model="form.enSenderCity"/>-->
      <!--        </el-form-item>-->
      <!--      </row-col>-->
      <!--      <row-col>-->
      <!--        <el-form-item label="英文发件人:">-->
      <!--          <el-input v-model="form.enSenderName"/>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="英文发件人地址" slot="r">-->
      <!--          <el-input v-model="form.enSenderAddress"/>-->
      <!--        </el-form-item>-->
      <!--      </row-col>-->
      <!--      <row-col>-->
      <!--        <el-form-item label="收件人城市">-->
      <!--          <el-input v-model="form.receiverCity"/>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="产销城市:" slot="r">-->
      <!--          <el-input v-model="form.saleCity"/>-->
      <!--        </el-form-item>-->
      <!--      </row-col>-->
      <!--      <row-col>-->
      <!--        <el-form-item label="发件人国别（地区）">-->
      <!--          <el-input v-model="form.senderCountry"/>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="备注（内件明细）:" slot="r">-->
      <!--          <el-input v-model="form.detailNotes"/>-->
      <!--        </el-form-item>-->
      <!--      </row-col>-->
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="备注:">
            <el-input v-model="form.notes" placeholder="中文"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-input v-model="form.laosNotes" placeholder="老挝语"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <row-col>
        <el-form-item label="当前网点:">
          {{form.currentName}}
        </el-form-item>
      </row-col>
    </el-form>
    <div slot="footer" v-if="hasSubmit">
      <submit-button ref="Submit" text="提 交" @submit="submit"/>
    </div>
    <print-only ref="PrintOnly"/>
  </card>
</template>

<script>
  import JS from '@/views/order/add_order/js'
  import FORM from '@/views/order/add_order/js/form'
  import SearchSelectAll from '@/views/components/EnabledSearchSelectAll';
  import InputSearchStart from '@/views/order/add_order/components/InputSearchStart';
  import InputSearchEnd from '@/views/order/add_order/components/InputSearchEnd';
  import SearchSelectItem from '@/views/order/add_order/components/SearchSelectItem';
  import PrintOnly from '@/views/print/print_only';
  import {itemData} from "@/utils/itemData";
  import {isEmpty, resetForm} from "@/utils/common";
  import {listAllUserApi} from "@/api/site/siteList";
  import {getFundApi} from '@/api/order'
  import {pageMailApi} from "@/api/order/online";

  export default {
    name: "AddSpecial",
    mixins: [JS, FORM],
    // eslint-disable-next-line
    components: {SearchSelectAll, InputSearchStart, InputSearchEnd, SearchSelectItem, PrintOnly},
    data() {
      return {
        // 结算方式(0 寄付 1 到付)
        form: {
          websiteClearingWay: 1
        },
        // 是否能搜索到品名
        hasItem: false,
        // 财务设置
        fund: {},
        // 收件地址id
        addressId: null
      }
    },
    watch: {
      'form.weight'() { // 重量 -> 运费
        this.calculateFreight()
      }
    },
    methods: {
      // 初始化
      init() {
        this.form.currentUserId = this.$user.id;
        this.form.currentUserName = this.$user.username;
        this.form.currentName = this.$user.name;
        this.form.laosCurrentName = this.$user.laosName;
        this.getInfo();
        this.getOneSender()
        this.getOnlineOrder()
      },

      // 重置
      cancel() {
        resetForm(this).then(() => {
          this.$storeSet('setOrder')
          this.init()
        })
      },

      /**
       * @description 收件地址选择
       * */
      // 计算运费
      calculateFreight() {
        if (isEmpty(this.fund)) {
          this.form.freight = 0
          return;
        }
        let weight = this.form.weight
        if (weight <= 0.5) {
          this.form.freight = 0.5 * this.fund.freight
        } else {
          this.form.freight = weight * this.fund.freight
        }
      },

      // 获得快递运费参数
      getFundSetting(username) {
        getFundApi({username}).then(result => {
          this.fund = result.resultParam.fund
          this.calculateFreight()
        })
      },

      // 选择网点地址
      getSiteAddress(obj) {
        if (obj) {
          this.form.sendToUserId = obj.id;
          this.form.sendToUserName = obj.username;
          this.form.sendToName = obj.name;
          this.form.laosSendToName = obj.laosName;
          this.form.receiverAddress = obj.address;
          this.form.laosReceiverAddress = obj.laosAddress;
          this.form.receiverCity = obj.address;  // 收件人城市
          this.getFundSetting(obj.username);
        } else {
          this.form.sendToUserId = null;
          this.form.sendToUserName = '';
          this.form.sendToName = '';
          this.form.laosSendToName = '';
          this.form.receiverAddress = '';
          this.form.laosReceiverAddress = '';
          this.form.receiverCity = '';  // 收件人城市
          this.fund = {}
        }
      },

      /**
       * @description 在线下单
       * */
      // 失去焦点获取在线下单
      getOnline() {
        if (!this.form.number) return
        let param = {
          current: 1, size: 10, state: 0, type: 2, receiverName: '', receiverPhone: '',
          number: this.form.number
        }
        this.$refs.Card.start()
        pageMailApi(param).then(result => {
          this.$refs.Card.stop()
          let response = result.resultParam.mailPage.records
          response.some(item => {
            if (item.number === this.form.number) {
              this.$storeSet('setOrder', item)
              this.getOnlineOrder()
              return true
            }
          })
        }).catch(() => {
          this.$refs.Card.stop()
        })
      },

      // 获取在线下单
      getOnlineOrder() {
        let params = this.$storeGet.order
        if (isEmpty(params)) return;
        this.form.number = params.number

        this.form.receiverName = params.receiverName
        this.form.laosReceiverName = params.laosReceiverName
        this.form.receiverPhone = params.receiverPhone

        this.form.weight = params.weight
        this.form.notes = params.detailNotes

        this.form.articleName = params.articleName
        this.form.insideCount = params.insideCount
        this.specification = params.specification
        this.brand = params.goods

        // 回显收件人详细地址
        this.getReceiverSite(params.sendToUserName)

        // 插入信息
        this.hasItem = false
        this.filterAsyncItem(itemData, params.articleName)
        if (!this.hasItem) {
          this.setItem({
            id: '27000000',
            name: params.articleName,
            price: 0,
            tax: '0%',
            unit: '千克'
          })
        }
      },

      // 回显收件人详细地址
      getReceiverSite(username) {
        listAllUserApi({username})
          .then(result => {
            let response = result.resultParam.userList
            this.$refs['SearchSelectAll'].selectOptions = response
            this.addressId = response[0].id
            this.getSiteAddress(response[0])
          })
      },

      // 遍历搜索品名
      filterAsyncItem(trees, name) {
        return trees.filter(tree => {
          if (tree.name.includes(name)) {
            this.hasItem = true
            this.setItem(tree)
            return
          }
          if (tree.children && tree.children.length) {
            tree.children = this.filterAsyncItem(tree.children, name)
          }
          return true
        })
      },

      // 插入信息
      setItem(data) {
        this.form.articleName = data.name; // 内件品名(中文)
        this.translateZhToLaos(data.name, 'laosArticleName') // 老挝文商品名称
        this.translateZhToEn(data.name, 'enArticleName') // 英文商品名称
        this.$refs.SearchSelectItem.setItemMethod(data.name)
        this.form.dutyParagraph = data.id; // 税号
        if (data.price && data.tax) {
          this.form.declarationUnitFee = data.price; // 申报单价
          this.form.taxRate = data.tax.replace(/([0-9.]+)%/, (a, b) => +b / 100) // 税率
        }
        this.getSpecifications(); // 规格型号
        this.changeWeight() // 计算毛重和净重
      }
    }
  }
</script>
